<template>
	<view class="wrapper">
		<!-- 个人资料 -->
		<view class="profile">
			<view class="meta">
				<!-- <image class="avatar" src="http://static.botue.com/ugo/uploads/monkey.png"></image> -->
				<open-data class="avatar" type="userAvatarUrl"></open-data>
				<!-- <text class="nickname">孙悟空</text> -->
				<open-data class="nickname" type="userNickName"></open-data>
			</view>
		</view>
		<!-- 统计 -->
		<view class="count">
			<view class="cell">
				<uni-icons type="star" size="30"></uni-icons>
				<text>收藏</text>
			</view>
			<view class="cell">
				<uni-icons type="location" size="30"></uni-icons>
				<text>足迹</text>
			</view>
			<view class="cell">
				<uni-icons type="compose" size="30"></uni-icons>
				<text>订单</text>
			</view>
			<view class="cell">
				<uni-icons type="cart" size="30"></uni-icons>
				<text>购物车</text>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="orders">
			<view class="title">我的订单</view>
			<view class="sorts">
				<view class="cell">
						<image src="../../../static/image/profile/wallet.svg" mode=""></image>
						<text>待付款</text>
				</view>
				<view class="cell">
					<image style="width: 30px;" src="../../../static/image/profile/to_deliver.svg" mode=""></image>
					<text>待发货</text>
				</view>
				<view class="cell">
					<image style="width: 38px;;" src="../../../static/image/profile/wait_goods.svg" mode=""></image>
					<text>待收货</text>
				</view>
				<view class="cell">
					<image src="../../../static/image/profile/judge.svg" mode=""></image>
					<text>待评价</text>
				</view>
				<view class="cell">
					<image src="../../../static/image/profile/after_service.svg" mode=""></image>
					<text>退款/售后</text>
				</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view style="margin-top: 10rpx;"><carousel :img-list="imgList" url-key="url" @selected="selectedBanner" /></view>
		<!-- 地址管理 -->
		<!-- <view class="address icon-arrow">收货地址</view> -->
		<!-- 其它 -->
		<view class="extra">
			<view  class="item icon-arrow">收货地址</view>
			<view @click="makePhone" class="item icon-arrow">联系客服</view>
			<button open-type="feedback" class="item icon-arrow">意见反馈</button>
		</view>
	</view>
</template>

<script>
import carousel from '@/components/vear-carousel/vear-carousel.vue';
export default {
	data() {
		return {
			// 轮播
			imgList: [
				{
					url: 'https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/forum/pic/item/d058ccbf6c81800ae8671f50a63533fa838b47ea.jpg',
					id: 1
				},
				{
					url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgslim.geekpark.net%2Fuploads%2Fimage%2Ffile%2F3d%2Fe8%2F3de8dc9e1f2a9c4f585c0e94da2e35a9.png&refer=http%3A%2F%2Fimgslim.geekpark.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627784426&t=e0aab80dfa9d22888fedeceacef6291b',
					id: 2
				},
				{
					url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wl890.com%2Fattached%2Fimage%2F20180910%2F20180910170323_581.jpg&refer=http%3A%2F%2Fwww.wl890.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627784486&t=8f160bc4cdeec8c9420a0b341f36d22b',
					id: 3
				},
				{
					url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgres.qi58.com%2Fqi58%2F16%2F79344-202006051200105ed9c34abfe5f.jpg&refer=http%3A%2F%2Fimgres.qi58.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627784826&t=4aec1604f7ec10603e89511d5778cae7',
					id: 4
				}
			]
		};
	},
	components: {
		carousel
	},
	methods: {
		makePhone() {
			// 调用 API 拨打电话
			uni.makePhoneCall({
				phoneNumber: '10086'
			});
		}
	}
};
</script>

<style scoped lang="less">
.wrapper {
	// position: absolute;
	top: 0;
	bottom: 0;

	width: 100%;
	background-color: #f4f4f4;
}

.profile {
	height: 375rpx;
	background-color: #893708;
	display: flex;
	justify-content: center;
	align-items: center;

	.meta {
		.avatar {
			display: block;
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			border: 2rpx solid #fff;
			overflow: hidden;
		}

		.nickname {
			display: block;
			text-align: center;
			margin-top: 20rpx;
			font-size: 30rpx;
			color: #fff;
		}
	}
}

.count {
	display: flex;
	margin: 0 20rpx;
	height: 150rpx;
	text-align: center;
	border-radius: 4rpx;
	background-color: #fff;

	position: relative;
	top: -27rpx;

	.cell {
		flex: 1;
		padding-top: 16rpx;
		font-size: 27rpx;
		color: #333;
	}

	text {
		display: block;
		font-size: 24rpx;
	}
}

.orders {
	margin: -17rpx 20rpx 0 20rpx;
	padding: 20rpx 0;
	background-color: #fff;
	border-radius: 4rpx;

	.title {
		padding-left: 20rpx;
		font-size: 30rpx;
		color: #333;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.sorts {
		position: relative;
		padding-top: 20rpx;
		text-align: center;
		display: flex;
		.cell {
			flex: 1;
		}
		text {
			display: block;
			font-size: 24rpx;
			// margin-top: -110px;
		}
		image {
			// display: block;
			position: relative;
			width: 32px;
			height: 32px;
			margin: 20rpx;
			// margin-top: -100px;
		}
	}

	[class*='icon-'] {
		flex: 1;
		font-size: 24rpx;

		&::before {
			display: block;
			font-size: 48rpx;
			margin-bottom: 8rpx;
			color: #ea4451;
		}
	}
}

.address {
	line-height: 1;
	background-color: #fff;
	font-size: 30rpx;
	padding: 25rpx 0 25rpx 20rpx;
	margin: 10rpx 20rpx;
	color: #333;
	border-radius: 4rpx;
}

.extra {
	margin: 0 20rpx;
	background-color: #fff;
	border-radius: 4rpx;

	.item {
		line-height: 1;
		padding: 25rpx 0 25rpx 20rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 30rpx;
		color: #333;
	}

	button {
		text-align: left;
		background-color: #fff;

		&::after {
			border: none;
			border-radius: 0;
		}
	}
}

.icon-arrow {
	position: relative;

	&::before {
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
	}
}
.swiper {
	height: 300rpx;
}
</style>
